/*
 * Copyright (c) 2025 Huawei Device Co., Ltd.
 * Licensed under the Apache License, Version 2.0 (the "License");
 * you may not use this file except in compliance with the License.
 * You may obtain a copy of the License at
 *
 *     http://www.apache.org/licenses/LICENSE-2.0
 *
 * Unless required by applicable law or agreed to in writing, software
 * distributed under the License is distributed on an "AS IS" BASIS,
 * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 * See the License for the specific language governing permissions and
 * limitations under the License.
 */

import React, { useState, useCallback } from 'react';
import { View, InteractionManager } from 'react-native';
import MusicPlay from './src/bundles/MusicPlay/MusicPlayPage.tsx';
import PlayList from './src/bundles/PlayList/PlayListPage.tsx';

function App(): JSX.Element {
  // 是显示音乐列表页面还是详情页面isShowList=true表示显示列表页面，显示false，表示显示音乐播放页面
  const [isShowList, setIsShowList] = useState(true);

  const changePageShow = useCallback((data: boolean) => {
    InteractionManager.runAfterInteractions(() => {
      setIsShowList(data);
    });
  }, []);

  return (
    <>
      <View style={{ display: isShowList ? '' : 'none', flex: 1 }}>
        <PlayList changePageShow={changePageShow} />
      </View>
      <View style={{ display: isShowList ? 'none' : 'flex' }}>
        <MusicPlay changePageShow={changePageShow} />
      </View>
    </>
  );
}
export default App;
